<template>
  <div class="main">
    <div class="banner flex-center flex-align-items-center">
      <div class="search">
        <div class="search-tab flex">
          <div class="flex-center pointer" :class="{ active: form.platform === 1 }" @click="platformChange(1)">
            <i class="iconfont icon-youguan_youtobe"></i>
            <p class="font-16-B">YouTube</p>
          </div>
          <div class="flex-center pointer" :class="{ active: form.platform === 2 }" @click="platformChange(2)">
            <i class="iconfont icon-icon_TikTok-square"></i>
            <p class="font-16-B">TikTok</p>
          </div>
        </div>
        <div class="search-main flex flex-align-items-center">
          <p class="label font-16-B">关键词搜索</p>
          <input v-model="form.keyword" type="text" placeholder="将搜索视频标题和简介里包含输入的关键词结果">
          <p class="btn flex-center flex-align-items-center pointer">
            <i class="iconfont icon-sousuo"></i>
          </p>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="filter-head flex-between">
        <p class="font-20">筛选功能</p>
        <el-checkbox v-model="form.check" label="只看我的收藏" />
      </div>

      <form-search :list="searchList" :info="form" column="4" @confirm="searchConfirm"></form-search>

      <div class="list">
        <div v-for="item in list" :key="item.id" class="item pointer" @click="toDetail(item)">
          <div class="item-top">
            <img :src="item.img">
            <p class="item-icon flex-center flex-align-items-center">
              <i class="iconfont icon-bofang"></i>
            </p>
            <p class="item-desc font-12">{{ item.count }}互动率</p>
          </div>
          <p class="item-name font-16 ellipsis-2">{{ item.name }}</p>
          <div class="item-bottom flex-between flex-align-items-center">
            <p class="flex flex-align-items-center font-14">
              <i class="iconfont icon-bofang2"></i>{{ numConvert(item.count, 2) }}
            </p>
            <p class="flex flex-align-items-center font-14">{{ item.time }}</p>
          </div>
        </div>
      </div>

      <div class="pagination flex-center flex-align-items-center">
        <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
      </div>
    </div>
  </div>

  <detail v-if="detailInfo.show" :id="detailInfo.id" @close="detailInfo.show = false"></detail>
</template>

<script setup>
import FormSearch from '../../components/formSearch.vue';
import Detail from './components/detail.vue';
import { ref } from 'vue';
import numConvert from '@/js/numConvert.js';

const searchList = ref([
  {
    label: '国家筛选',
    type: 'select',
    key: 'text',
    options: [
      {
        label: '中国',
        value: 1
      },
      {
        label: '美国',
        value: 2
      }
    ]
  },
  {
    label: '红人分类',
    type: 'select',
    key: 'taskName',
    options: [
      {
        label: '科技',
        value: 1
      },
      {
        label: '运动',
        value: 2
      }
    ]
  },
  {
    label: '互动率',
    type: 'select',
    key: 'name',
    options: [
      {
        label: '20%-30%',
        value: 1
      },
      {
        label: '30%-40%',
        value: 2
      },
      {
        label: '>40%',
        value: 3
      }
    ]
  }
]);
const form = ref({
  platform: 1,
  total: 100
});
const list = ref([
  {
    id: 1,
    name: 'xxxxx',
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    count: 1564654,
    time: '2023-12-22'
  },
  {
    id: 2,
    name: 'xxxxx',
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    count: 1564654,
    time: '2023-12-22'
  }
]);
const detailInfo = ref({
  show: false
});

const platformChange = e => {
  if (form.value.platform !== e) {
    form.value.platform = e;
  }
}
const searchConfirm = e => {
  form.value = {
    ...form.value,
    ...e
  }
}
const toDetail = e => {
  detailInfo.value = {
    id: e.id,
    show: true
  }
}
</script>

<style lang="less" scoped>
.main {
  padding: 16px;

  &::v-deep {
    .search {
      padding: 0;
      margin-bottom: 48px;
      box-shadow: none;
    }
  }
}

.banner {
  height: 200px;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
  background-image: url(@/assets/bg-content.jpg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  margin-bottom: 16px;

  .search {
    width: 650px;

    .search-tab {
      div {
        width: 140px;
        height: 53px;
        padding-top: 11px;
        border-radius: 4px 4px 0 0;
        background: #fff;
        margin-right: 16px;

        &:first-child {
          i {
            color: @main-color;
          }
        }

        &:last-child {
          i {
            color: #333;
          }
        }

        &.active {
          background: @main-color;

          i,
          p {
            color: #fff !important;
          }
        }

        i {
          font-size: 24px;
          margin-right: 4px;
        }

        p {
          color: #333;
        }
      }
    }

    .search-main {
      height: 52px;
      padding-left: 8px;
      background: #fff;
      border: 1px solid @main-color;
      border-radius: 4px;
      position: relative;
      bottom: 8px;
      overflow: hidden;
      padding-left: 8px;

      .label {
        width: 122px;
        height: 40px;
        background: #f2f4f6;
        border-radius: 4px;
        color: #666;
        text-align: center;
        line-height: 40px;
      }

      input {
        flex: 1;
        margin: 0 24px;
        font-size: 16px;
        color: #555;
        outline: none;
        border: none;
      }

      .btn {
        width: 80px;
        height: 100%;
        background: @main-color;

        i {
          color: #fff;
          font-size: 22px;
        }
      }
    }
  }
}

.content {
  padding: 32px 34px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04);

  .filter-head {
    height: 52px;
    margin-bottom: 24px;
    border-bottom: 1px dashed #d3d3d3;

    p {
      color: #333;
    }
  }

  .list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    .item {
      padding: 20px 20px 14px;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
      margin-right: 10px;
      margin-bottom: 24px;

      &:nth-child(4n) {
        margin-right: 0;
      }

      .item-top {
        position: relative;
        height: 200px;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 20px;

        img {
          width: 100%;
          height: 100%;
        }

        .item-icon {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 56px;
          height: 56px;
          background: hsla(0, 0%, 57%, .45);
          border-radius: 50%;

          i {
            color: #fff;
            font-size: 24px;
          }
        }

        .item-desc {
          color: #fff;
          position: absolute;
          top: 12px;
          right: 12px;
        }
      }

      .item-name {
        height: 44px;
        line-height: 22px;
        color: #333;
        margin-bottom: 16px;
      }

      .item-bottom {
        p {
          color: rgba(51, 51, 51, .65);

          i {
            color: rgba(51, 51, 51, .65);
            margin-right: 8px;
          }
        }
      }
    }
  }
}
</style>
